<template>
  <div class="user">
    <div class="list">
        <div>
            <button @click="flag=true">+  新增</button>
        </div>
        <Addhot v-if="flag"   @close="guanbiceng"/>
       
       
       <avue-crud ref="crud" :option="option"  :data="data" :cell-style="cellStyle"  @row-click="rowClick"></avue-crud>
      
       <Change :toSonData="res"  v-if="chang"   @close="rowClick"/>
    </div>
 
  </div>
</template>

<script>
import Addhot from '../../../components/addHot'
import Change from '../../../components/changeHot'
import axios from 'axios'
export default {
  name:"user",
  components:{
    Addhot,Change
  },
  data(){
    return {
      chang:false,
      flag: false,
     
       page1: {
          currentPage: 1,
          total: 0,
          layout: "total,pager,prev, next",
          background:false,
          pageSize: 10
        },
       data:[
       ],
       option:{
          align: 'center',
          menuAlign: 'center',
          addBtn:false,
          menu:false,
          column: [
              {
              label: '活动名称',
              prop: 'shopName',
              cell: true

            },{
              label: '活动类型',
              prop: 'shopType',
              cell: true
            },{
              label: '活动学校',
              prop: 'collage',
              cell: true
            },{
              label:'活动开始时间',
              prop: 'startTime',
              cell: true
            },{
              label: '活动结束时间',
              prop: 'endTime',
              cell: true
            },{
              label: '活动价格',
              prop: 'price',
              cell: true
            },{
              label: '活动状态',
              prop: 'title',
              cell: true
            }
          ]
       },
       res:[]
    }
  },


  created(){
 
    this.getList()
   
  },
 methods: {
    rowClick(row) {
      console.log(row);
      this.res = row
      this.chang = row;
    },
    cellStyle({row,column,rowIndex,columnIndex}){
      // console.log(,999);
      if(columnIndex==6){
        if(row.stuAuth === 0){
          return {
            color:'rgba(0,0,0,0.5)',
          }
        }else if(row.stuAuth === 1){
          return {
            color:'rgb(21, 160, 255)'
          }
        }else{
          return {
            color:'red',
            
          }
        }
      }
    }
   ,
   getList() {
      axios.post('apis/pc_hot').then(res=>{
        this.data = JSON.parse(JSON.stringify(res.data.data))
        this.data.forEach(item =>{
          item.title = this.numTolabel(item.stuAuth)
          function rTime(date) {
              var json_date = new Date(date).toJSON();
              return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') 
          }
          item.startTime = rTime(item.startTime)
          item.endTime = rTime(item.endTime)
        })
      })
   },
    numTolabel(value){
      let str ="";
      switch(value){
        case 1 :
          str = "活动开始"
          break;
        case 2 :
          str = "活动结束"
          break;
        default :
          str = "活动未开始"
      }
      return str
    },
    closeDiv(){
      this.$emit('close',false)
    },
    guanbiceng(data) {
      this.flag = data;
    },
  },
  computer:{
   
  },
}
</script>

<style scoped>
  .list{
    width: 88%;
    padding: 20px;
    text-align: center;
  }
    .list div:first-of-type {
      width: 100%;
      height: 60px;
      background: #fff;
      line-height: 80px;
      text-align: left;
      padding-left:40px ;
    }
  .list div:first-of-type button{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #2897ff;
    border: 1px solid #DCDFE6;
    color: #fff;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px;

  }

</style>